<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 查询条件和按钮 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="query"><el-button slot="append" icon="el-icon-search" @click="getList"></el-button></el-input>
        </el-col>
        <el-col :span="4"><el-button type="primary" @click="addDialogVisible = true">新增</el-button></el-col>
      </el-row>
      <!-- 列表 -->
      <el-table :data="list">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="UserName" label="用户名"></el-table-column>
        <el-table-column prop="UserType" label="用户类型">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.UserType == 1">系统管理员</el-tag>
            <el-tag type="warning" v-if="scope.row.UserType == 2">普通用户</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="IsValid" label="是否启用">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.IsValid" @change="changeState(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="CreateTime" label="创建时间">
          <template slot-scope="scope">
            <span>{{ scope.row.CreateTime | dateformate }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 100, 500]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <!-- 新增对话框 -->
    <el-dialog title="新增用户" :visible.sync="addDialogVisible" width="30%" @close="resetAddForm">
      <el-form :model="addModel" :rules="addModelRules" ref="addFormRef" label-width="100px">
        <el-form-item label="用户名" prop="UserName"><el-input v-model="addModel.UserName"></el-input></el-form-item>
         <el-form-item label="密码" prop="Password"><el-input v-model="addModel.Password" type="password"></el-input></el-form-item>
        <el-form-item label="用户类型" prop="UserType">
          <el-select v-model="addModel.UserType" placeholder="请选择">
            <el-option v-for="item in userTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否启用" prop="IsValid"><el-switch v-model="addModel.IsValid"></el-switch></el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: '',
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      list: [],
      addDialogVisible: false,
      addModel: {
        UserName:'',
        Password:'',
        UserType:'',
        IsValid:true
      },
      addModelRules: {
        UserName: [{ required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }],
         Password: [{ required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }],
        UserType: [{ required: true, message: '请选择用户类型', trigger: 'blur' }]
      },
      userTypeList: [{ value: '1', label: '系统管理员' }, { value: '2', label: '普通用户' }]
    }
  },
  methods: {
    //改变显示页码触发
    handleSizeChange(newSize) {
      this.pageSize = newSize
      this.getList()
    },
    //跳转页面触发
    handleCurrentChange(newPage) {
      this.pageIndex = newPage
      this.getList()
    },
    async getList() {
      const res = await this.$http.get('user/pager', { params: { query: this.query, pageSize: this.pageSize, pageIndex: this.pageIndex } })
      this.total = res.total
      this.list = res.list
    },
    async changeState(info) {
      const res = await this.$http.post(`/user/edit/${info.Id}`, info)
      if (!res.flag) {
        info.IsValid = !info.IsValid
        return this.$message.error(res.msg)
      }
      this.$message.success('修改状态成功')
    },
    add() {
      //表单与预验证
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return
        const res = await this.$http.post('user/add', this.addModel)
        if (!res.flag) return this.$message.error(res.msg)
        this.$message.success('新增用户成功')
        //关闭弹窗
        this.addDialogVisible=false
        //刷新页面
        this.getList()
      })
    },
    resetAddForm(){
      this.$refs.addFormRef.resetFields()
    }
  },
  mounted() {
    this.getList()
  }
}
</script>

<style scoped lang="less">
.el-table {
  margin-top: 15px;
}
</style>
